
<template>
  <div>
   根据非树结构循环为树形结构
  </div>
</template>
<script>
  export default {
    components:{
      
    },
    data() {
      return {
        data:[
          {   
              "name": "女装/男装/内衣",    
              "parentId": null ,   //父级id
              "id": '20210304' //唯一标识id    
          }, 
          {  "name": "女装",    "parentId": "20210304", "id": '1030401'}, 
          {  "name": "男装",    "parentId": "20210304", "id": '1030402'}, 
          {  "name": "童装",    "parentId": "20210304", "id": '1030403'}, 
          {  "name": "内衣",    "parentId": "20210304", "id": '1030404'}, 
          {   
              "name": "连衣裙/毛呢外套/休闲裤/牛仔外套",    
              "parentId": null ,   //父级id
              "id": '20210305'
          },
          {   "name": "连衣裙",    "parentId": "20210305", "id": '1030405'}, 
          {   "name": "毛呢外套",    "parentId": "20210305", "id": '1030406'}, 
          {   "name": "休闲裤",    "parentId": "20210305", "id": '1030407'}, 
          {   "name": "牛仔外套",    "parentId": "20210305", "id": '1030408'}, 
           {   
              "name": "围巾",    
              "parentId": null ,   //父级id
              "id": '20210306'
          },
        ]
      }
    },

    mounted() {
        let data1 = this.data;//后台初始数据               
        console.log(this.setTreeData(data1))

    },

    methods: {
        setTreeData(arr) {                
            // 删除所有的children,以防止多次调用               
            arr.forEach(function(item) {                   
             	delete item.children;                
            });                
            let map = {}; //构建map                
            arr.forEach(i => {                    
              map[i.id] = i; //构建以id为键 当前数据为值                
            });                
            let treeData = [];                
            arr.forEach(child => {                    
                const mapItem = map[child.parentId]; //判断当前数据的parentId是否存在map中                    
                if (mapItem) {                        
                    //存在则表示当前数据不是最顶层的数据                        
                    //注意： 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点                        
                    (mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child                    
                    } else {                        //不存在则是顶层数据                        
                    treeData.push(child);                    
                    }                
            });                
            return treeData;           
         } 
    },

  }
</script>
<style scoped>

</style>